<template>
  <el-card class="box-card">
    <el-row>
      <el-row class="w0" justify="center">{{weather[0]}}</el-row>
      <el-row class="w1">
        <div class="w1_0">
          <el-row>
            <div :span="16" class="w1_0_0">{{weather[1]}}</div>
            <div :span="8" class="w1_0_1">°</div>
          </el-row>
        </div>
        <div class="w1_1">
          <el-image :src="weather[2]" style="width: 65px; height: 65px;"></el-image>
        </div>
        <div class="w1_2">{{weather[3]}}</div>
      </el-row>
      <el-row class="w2">
        <div class="w2_0" :style="{
          'background-color':colors1[air]||colors2[air]
        }">{{weather[4]}}</div>
        <el-row class="w2_1">
          <el-image src="https://h5tq.moji.com/tianqi/assets//images/index/i_water.png" style="width:20px;height:20px;" />
          <div class="w2_1_2">{{weather[5]}}</div>
        </el-row>
        <el-row class="w2_2">
          <el-image src="https://h5tq.moji.com/tianqi/assets//images/index/i_wind.png" style="width:20px;height:20px;" />
          <div class="w2_2_2">{{weather[6]}}</div>
        </el-row>
      </el-row>
      <el-row class="w3">{{weather[7]}}</el-row>
    </el-row>
    <div class="icon-container" @click="slide">
      <el-icon color="rgba(255, 255, 255, 0.7)">
        <more-filled />
      </el-icon>
    </div>
    <el-divider />
    <el-row class="forecast">
      <el-col :span="8" v-for="forecast in forecasts" v-bind:key="forecast[0]">
        <div>{{forecast[0]}}</div>
        <div class="f1">{{forecast[1]}}</div>
        <el-image :src="forecast[2]" style="width: 35px; height: 35px;"></el-image>
        <div class="f3">{{forecast[3]}}</div>
        <el-image :src="forecast[4]" style="width: 35px; height: 35px;"></el-image>
        <div class="f5">{{forecast[5]}}</div>
        <div class="f6">
          <span class="f6_0" :style="{
            'background-color':colors1[forecast[6]]||colors2[forecast[6]]
          }">{{forecast[6]}}</span>
        </div>
      </el-col>
      <el-row class="time">{{updateTime}}</el-row>
    </el-row>
  </el-card>
</template>

<script>
import axios from 'axios'
import pinyin from 'pinyin'
import moment from 'moment'
import {
  MoreFilled
} from '@element-plus/icons-vue'

export default {
  name: "Weather",
  components: {
    MoreFilled
  },
  data() {
    return {
      weather: [],
      forecasts: [],
      air: '',
      updateTime: '',
      colors1: {
        '优': '#8fc31f',
        '良': '#d7af0e',
        '轻度污染': '#f39800',
        '中度污染': '#e2361a',
        '重度污染': '#5f52a0',
        '严重污染': '#631541'
      },
      colors2: {
        '优': '#8fc31f',
        '良': '#d7af0e',
        '轻度': '#f39800',
        '中度': '#e2361a',
        '重度': '#5f52a0',
        '严重': '#631541'
      }
    }
  },
  mounted() {
    this.getData()
    setInterval(() => {
      this.getData()
    }, 1000 * 60 * 20)
  },
  methods: {
    slide() {
      this.$emit('slide')
    },
    getData() {
      const locationUrl = 'https://ip.tool.lu'
      const weatherUrl = 'http://tianqi.moji.com'
      const forecastUrl = 'https://m.moji.com'
      axios.get(locationUrl).then((data) => {
        // 位置信息
        const location = data.data.split('中国 ')[1].split(' ').join('/')
        const param = '/weather/china/' + pinyin(location, {
          style: pinyin.STYLE_NORMAL
        }).join('')
        // 及时天气
        axios.get(weatherUrl + param).then((data) => {
          try {
            this.parseWeatherData(data.data)
          } catch (e) {
            console.log('及时天气精准查询失败！')
            // 模糊查询天气
            axios.get(weatherUrl).then((data) => {
              this.parseWeatherData(data.data)
            })
          }
        })
        // 未来天气
        axios.get(forecastUrl + param).then((data) => {
          try {
            this.parseForecastData(data.data)
          } catch (e) {
            console.log('未来天气精准查询失败！')
            // 模糊查询天气
            axios.get(forecastUrl).then((data) => {
              this.parseForecastData(data.data)
            })
          }
        })
        // 更新时间
        this.updateTime =  new moment().format('更新时间：YYYY-MM-DD HH:mm:ss')
      })
    },
    parseWeatherData(data) {
      const result = []
      data = data.split('\n')
      const lines = [71, 110, 111, 112, 104, 116, 117, 121]
      const offset = data.findIndex(i => i.indexOf('wea_weather clearfix') > -1) - 109
      lines.forEach(i => {
        const j = i < 109 ? i : i + offset
        if (j === 111 + offset)
          result.push(data[j].split('src="')[1].split('" alt')[0])
        else
          result.push(data[j].split(">")[1].split("<")[0])
      })
      this.weather = result
      this.air = result[4].split(' ')[1]
    },
    parseForecastData(data) {
      const result = []
      data = data.split('\n')
      const index = data.findIndex(i => i.indexOf('week_line') > -1)
      const indexes = [index + 3 + 16 * 2, index + 3 + 16 * 3, index + 3 + 16 * 4]
      indexes.forEach((i, index) => {
        const arr = []
        arr.push(index === 0 ? '明天' : data[i].split(">")[1].split("<")[0])
        arr.push(new moment().add(index + 1, 'days').format('MM/DD'))
        arr.push('https:' + data[i + 3].split('src="')[1].split('" alt')[0])
        arr.push(data[i - 1].split('data-low="')[1].split('"')[0] + '°~' + data[i - 1].split('data-high="')[1].split('"')[0] + '°')
        arr.push('https:' + data[i + 7].split('src="')[1].split('" alt')[0])
        arr.push(data[i + 11].split(">")[1].split("<")[0])
        arr.push(data[i + 10].split(">")[1].split("<")[0])
        result.push(arr)
      })
      this.forecasts = result
    }
  }
}
</script>

<style scoped>
.box-card {
  width: 400px;
  border: none;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
}
.icon-container {
  position: absolute;
  top: 208px;
  left: 382px;
  cursor: pointer;
}
.icon:hover {
  color: rgba(255, 255, 255, 0.3);
}
.w0 {
  font-weight: bold;
  font-size: 24px;
  text-align: center;
  width: 100%;
}
.w1 {
  width: 100%;
}
.w1_0_0 {
  font-weight: bold;
  font-size: 90px;
  padding-top: 6px;
}
.w1_0_1 {
  font-weight: bold;
  font-size: 50px;
  padding-top: 10px;
}
.w1_1 {
  padding-top: 36px;
}
.w1_2 {
  font-weight: bold;
  font-size: 30px;
  padding-top: 60px;
  margin-left: 10px;
}
.w2 {
  width: 100%;
  text-align: left;
  height: 22px;
}
.w2_0 {
  text-align: center;
  padding: 2px 10px;
  border-radius: 16px;
  height: 20px;
}
.w2_1 {
  margin-left: 15px;
  display: flex;
  height: 22px;
}
.w2_1_2 {
  line-height: 24px;
  height: 22px;
}
.w2_2 {
  margin-left: 15px;
  display: flex;
  height: 22px;
}
.w2_2_2 {
  line-height: 24px;
  height: 22px;
}
.w3 {
  margin-top: 12px;
}
:deep(.el-divider--horizontal) {
  margin: 16px 0;
}
.f1, .f3, .f5, .f6 {
  padding: 5px 0 4px 0;
}
.f3 {
  font-weight: bold;
  font-size: 20px;
}
.f6_0 {
  text-align: center;
  padding: 2px 10px;
  border-radius: 16px;
  height: 20px;
}
.time {
 padding: 10px 0 0 10px;
}
</style>